<template>
  <div class='short-video'>
    <!-- 这里要加个顶部  和视频页一样-->
    <Come-back-home :isLine=true />
    <Film-title title="短视频" />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      offset=0
    >
      <a
        class="link"
        v-for="(shortvideo,index) in shortvideolist"
        :key="index"
      >
        <div
          class="
      short-video-item"
          :style="{backgroundImage: 'url(' + shortvideo.bgimg + ')',backgroundRepeat:'no-repeat'}"
          @click.prevent="goToShortVideo(shortvideo)"
        >
          <div class="title">{{shortvideo.title}}</div>
          <div class="video-info"><img
              class="img user-avatar"
              :src="shortvideo.upimg"
              width="21.5"
              height="21.5"
            >
            <div class="user-name">{{shortvideo.upname}}</div>
            <img
              class="img like-icon"
              src="//p1.meituan.net/moviemachine/5377c2c03dacf20b6e286e3e72dd57911272.png@80q"
              width="18"
              height="18"
            >
            <div class="like-count">{{shortvideo.likes}}</div>
          </div>
        </div>
      </a>
    </van-list>
  </div>

</template>
<script>
export default {
  data: () => ({
    shortvideolist: [],
    index: -1,
    list: [],
    loading: false,
    finished: false
  }),
  methods: {
    goToShortVideo(shortvideo) {
      // console.log(1)
      this.$router.push({
        name: 'shortVideoDetail',
        // 这里必须以对象解析的格式
        params: shortvideo
      })
    },
    async getShortVideo() {
      this.index++
      const res = await this.$http.getShortVideo()
      const allVideo = res.data.message
      // this.shortvideolist.push(allVideo)
      for (let i = this.index; i < this.index * 2; i++) {
        this.shortvideolist.push(allVideo[i])
      }
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        this.getShortVideo()
        // 加载状态结束
        this.loading = false
        // 数据全部加载完成
        if (this.shortvideolist.length >= 20) {
          this.finished = true
        }
      }, 1000)
    }
  },
  created() {
    this.getShortVideo()
  },
  components: {
  }
}
</script>
<style lang="scss" scoped>
.short-video {
  position: relative;
  margin-bottom: 48px;
  // 去除缝隙
  font-size: 0;
  .short-video-item {
    margin: 0;
    position: relative;
    display: inline-block;
    width: 49.5%;
    height: 300px;
    background-position: 50%;
    background-size: cover;
    .title,
    .video-info {
      width: 170px;
      margin: 0 8px;
      position: absolute;
      color: #fff;
    }
    .title {
      font-size: 15px;
      line-height: 21px;
      bottom: 41px;
      text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      height: 42px;
      text-overflow: ellipsis;
    }
    .video-info {
      display: flex;
      align-items: center;
      bottom: 14px;
      font-size: 13px;
      img.user-avatar {
        opacity: 0.9;
        border: 0 solid rgba(42, 42, 42, 0.05);
        border-radius: 10px;
      }
      .user-name {
        margin: 0 6px;
        flex: 1;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .like-icon {
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-right: 3px;
        background-color: transparent;
      }
      .like-count {
        width: 37px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  .link {
    cursor: pointer;
    text-decoration: none;
  }
  .van-loading_text {
    color: red;
  }
  .van-list__finished-text {
    width: 100%;
    margin-bottom: 30px;
  }
}
</style>
